.arrow(@arrowBgColor:#fff,@arrowBorderColor:#f0f0f0,@arrowSize:6px,@position:10px,@arrowWidth:1px){
  position:relative;
  background:@arrowBgColor;
  border:1px solid @arrowBorderColor;
  &::before,&::after{
    content:"";
    position:absolute;
    width:0;
    height:0;
    border:solid transparent;
  }
  &::before{
    border-width:@arrowSize;
  }
  &::after{
    border-width:@arrowSize - @arrowWidth;
  }
  /*&.lt{
    &::before,&::after{
      bottom:100%;
    }
    &::before{
      left:@position;
      border-bottom-color:@arrowBorderColor;
    }
    &::after{
      left:@position + @arrowWidth;
      border-bottom-color:@arrowBgColor;
    }
  }
  &.rt{
    &::before,&::after{
      bottom:100%;
    }
    &::before{
      right:@position;
      border-bottom-color:@arrowBorderColor;
    }
    &::after{
      right:@position + @arrowWidth;
      border-bottom-color:@arrowBgColor;
    }
  }
  &.lb{
    &::before,&::after{
      bottom:0;
      top:100%;
      border-top-color:@arrowBorderColor;
    }
    &::before{
      left:@position;
    }
    &::after{
      left:@position + @arrowWidth;
      border-top-color:@arrowBgColor;
    }
  }
  &.rb{
    &::before,&::after{
      bottom:0;
      top:100%;
    }
    &::before{
      right:@position;
      border-top-color:@arrowBorderColor;
    }
    &::after{
      right:@position + @arrowWidth;
      border-top-color:@arrowBgColor;
    }
  }*/
}
.arrow-lt(@arrowBgColor:#fff,@arrowBorderColor:#f0f0f0,@arrowSize:6px,@position:10px,@arrowWidth:1px){
  .arrow(@arrowBgColor,@arrowBorderColor,@arrowSize,@position,@arrowWidth);
  &::before,&::after{
    top:auto;
    bottom:100%;
  }
  &::before{
    left:@position;
    border-bottom-color:@arrowBorderColor;
  }
  &::after{
    left:calc(@position + @arrowWidth);
    border-bottom-color:@arrowBgColor;
  }
}
.arrow-rt(@arrowBgColor:#fff,@arrowBorderColor:#f0f0f0,@arrowSize:6px,@position:10px,@arrowWidth:1px){
  .arrow(@arrowBgColor,@arrowBorderColor,@arrowSize,@position,@arrowWidth);
  &::before,&::after{
    top:auto;
    bottom:100%;
  }
  &::before{
    right:@position;
    border-bottom-color:@arrowBorderColor;
  }
  &::after{
    right:calc(@position + @arrowWidth);
    border-bottom-color:@arrowBgColor;
  }
}
.arrow-lb(@arrowBgColor:#fff,@arrowBorderColor:#f0f0f0,@arrowSize:6px,@position:10px,@arrowWidth:1px){
  .arrow(@arrowBgColor,@arrowBorderColor,@arrowSize,@position,@arrowWidth);
  &::before,&::after{
    bottom:auto;
    top:100%;
    border-top-color:@arrowBorderColor;
  }
  &::before{
    left:@position;
  }
  &::after{
    left:calc(@position + @arrowWidth);
    border-top-color:@arrowBgColor;
  }
}
.arrow-rb(@arrowBgColor:#fff,@arrowBorderColor:#f0f0f0,@arrowSize:6px,@position:10px,@arrowWidth:1px){
  .arrow(@arrowBgColor,@arrowBorderColor,@arrowSize,@position,@arrowWidth);
  &::before,&::after{
    bottom:auto;
    top:100%;
  }
  &::before{
    right:@position;
    border-top-color:@arrowBorderColor;
  }
  &::after{
    right:calc(@position + @arrowWidth);
    border-top-color:@arrowBgColor;
  }
}
.arrow-tl(@arrowBgColor:#fff,@arrowBorderColor:#f0f0f0,@arrowSize:6px,@position:10px,@arrowWidth:1px){
  .arrow(@arrowBgColor,@arrowBorderColor,@arrowSize,@position,@arrowWidth);
  &::before,&::after{
    left:auto;
    right:100%;
  }
  &::before{
    top:@position;
    border-right-color:@arrowBorderColor;
  }
  &::after{
    top:calc(@position + @arrowWidth);
    border-right-color:@arrowBgColor;
  }
}
.arrow-tr(@arrowBgColor:#fff,@arrowBorderColor:#f0f0f0,@arrowSize:6px,@position:10px,@arrowWidth:1px){
  .arrow(@arrowBgColor,@arrowBorderColor,@arrowSize,@position,@arrowWidth);
  &::before,&::after{
    right:auto;
    left:100%;
  }
  &::before{
    top:@position;
    border-left-color:@arrowBorderColor;
  }
  &::after{
    top:calc(@position + @arrowWidth);
    border-left-color:@arrowBgColor;
  }
}
.arrow-bl(@arrowBgColor:#fff,@arrowBorderColor:#f0f0f0,@arrowSize:6px,@position:10px,@arrowWidth:1px){
  .arrow(@arrowBgColor,@arrowBorderColor,@arrowSize,@position,@arrowWidth);
  &::before,&::after{
    left:auto;
    right:100%;
  }
  &::before{
    bottom:@position;
    border-right-color:@arrowBorderColor;
  }
  &::after{
    bottom:calc(@position + @arrowWidth);
    border-right-color:@arrowBgColor;
  }
}
.arrow-br(@arrowBgColor:#fff,@arrowBorderColor:#f0f0f0,@arrowSize:6px,@position:10px,@arrowWidth:1px){
  .arrow(@arrowBgColor,@arrowBorderColor,@arrowSize,@position,@arrowWidth);
  &::before,&::after{
    right:auto;
    left:100%;
  }
  &::before{
    bottom:@position;
    border-left-color:@arrowBorderColor;
  }
  &::after{
    bottom:calc(@position + @arrowWidth);
    border-left-color:@arrowBgColor;
  }
}

.angle(@angleSize:6px,@width:1px){
  --pos:calc(@angleSize - @width)/2;
  position:relative;
  display:inline-block;
  font-style:normal;
  float:right;
  cursor:pointer;
  height:100%;
  width:2*@angleSize;
  &::before,&::after{
    content:"";
    display:block;
    position:absolute;
    border-radius:1px;
    background-color:currentColor;
    height:@width;
    width:@angleSize;
    left:0;
    transform-origin:100% 50% 0;
    transition:all .3s;
  }
  &::before{
    left:0;
  }
  &::after{
    left:calc(@width * 0.7);
  }
  /*&.bottom{
    &::before,&::after{
      top:calc(50% + @pos);
    }
    &::before{
      transform:rotate(135deg);
    }
    &::after{
      transform:rotate(45deg);
    }
  }
  &.top{
    &::before,&::after{
      top:calc(50% - @pos);
    }
    &::before{
      transform:rotate(225deg);
    }
    &::after{
      transform:rotate(-45deg);
    }
  }*/
}
.angle-bt(@angleSize:6px,@width:1px){
  .angle(@angleSize,@width);
  &::before,&::after{
    top:calc(50% + var(--pos));
  }
  &::before{
    transform:rotate(135deg);
  }
  &::after{
    transform:rotate(45deg);
  }
}
.angle-top(@angleSize:6px,@width:1px){
  .angle(@angleSize,@width);
  &::before,&::after{
    top:calc(50% - var(--pos));
  }
  &::before{
    transform:rotate(225deg);
  }
  &::after{
    transform:rotate(-45deg);
  }
}

.follow(@followSize:3px,@followColor:currentColor,@followPadding:0px){
  position:relative;
  &::after{
    content:"";
    display:block;
    position:absolute;
    left:@followPadding;
    bottom:0;
    top:auto;
    height:@followSize;
    width:calc(100% - @followPadding * 2);
    background-color:@followColor;
    transform:scale(0);
    transition:transform .3s;
    // transition:all .3s;
  }
  /*&:hover,*/&.active{
    &::after{
      transform:scale(1);
      transition:transform .3s;
    }
  }
}
.follow-hover(@followSize:3px,@followColor:currentColor,@followPadding:0px){
  .follow(@followSize,@followColor,@followPadding);
  &:hover{
    &::after{
      transform:scale(1);
      transition:transform .3s;
    }
  }
}
.follow-vertical(@followSize:3px,@followColor:currentColor,@followPadding:0px){
  .follow(@followSize,@followColor,@followPadding);
  &::after{
    left:0;
    bottom:0;
    top:0;
    height:100%;
    width:@followSize;
  }
}
.follow-vertical-hover(@followSize:3px,@followColor:currentColor,@followPadding:0px){
  .follow(@followSize,@followColor,@followPadding);
  &:hover{
    &::after{
      transform:scale(1);
      transition:transform .3s;
    }
  }
}
.follow-vertical-right(@followSize:3px,@followColor:currentColor,@followPadding:0px){
  .follow(@followSize,@followColor,@followPadding);
  &::after{
    left:calc(100% - @followSize);
    // left:auto;
    // right:0;
    bottom:0;
    top:0;
    height:100%;
    width:@followSize;
  }
}
.follow-vertical-right-hover(@followSize:3px,@followColor:currentColor,@followPadding:0px){
  .follow(@followSize,@followColor,@followPadding);
  &:hover{
    &::after{
      transform:scale(1);
      transition:transform .3s;
    }
  }
}

.tooltip(@tooltipBgColor:#303133,@tooltipBorderColor:#303133,@tooltipColor:#fff,@position:15px,@arrowSize:8px){
  position:relative;
  // cursor:pointer;
  &:hover{
    &::before,&::after{
      display:block;
    }
  }
  &::before,&::after{
    display:none;
    position:absolute;
    z-index:10000;
    background-color:@tooltipBgColor;
    border:1px solid @tooltipBorderColor;
  }
  &::before{
    content:attr(tooltips);
    z-index: 100002;
    padding:4px 10px;
    text-align: left;
    max-width:200px;
    font-size:1.2rem;
    color:@tooltipColor;
    border-radius:4px;
    box-shadow:0 10px 20px -5px rgba(0,0,0,0.4);
    white-space:nowrap;//normal;
    // word-wrap:break-word;
    // word-break:break-all;
  }
  &::after{
    content:"";
    height:@arrowSize + 2px;
    width:@arrowSize + 2px;
    border-left-color:transparent;
    border-bottom-color:transparent;
  }
}
.tooltip-lb(@tooltipBgColor:#303133,@tooltipBorderColor:#303133,@tooltipColor:#fff,@position:15px,@arrowSize:8px){
  &[tooltips]{
    .tooltip(@tooltipBgColor,@tooltipBorderColor,@tooltipColor,@position,@arrowSize);
    &::before{
      left:0;
      bottom:calc(100% + @arrowSize);
    }
    &::after{
      left:@position;
      bottom:calc(100% + @arrowSize / 2);
      transform:rotate(135deg);
    }
  }
}
.tooltip-rb(@tooltipBgColor:#303133,@tooltipBorderColor:#303133,@tooltipColor:#fff,@position:15px,@arrowSize:8px){
  &[tooltips]{
    .tooltip(@tooltipBgColor,@tooltipBorderColor,@tooltipColor,@position,@arrowSize);
    &::before{
      right:0;
      bottom:calc(100% + @arrowSize);
    }
    &::after{
      right:@position;
      bottom:calc(100% + @arrowSize/2);
      transform:rotate(135deg);
    }
  }
}
.tooltip-lt(@tooltipBgColor:#303133,@tooltipBorderColor:#303133,@tooltipColor:#fff,@position:15px,@arrowSize:8px){
  &[tooltips]{
    .tooltip(@tooltipBgColor,@tooltipBorderColor,@tooltipColor,@position,@arrowSize);
    &::before{
      left:0;
      top:calc(100% + @arrowSize);
    }
    &::after{
      left:@position;
      top:calc(100% + @arrowSize/2);
      transform:rotate(-45deg);
    }
  }
}
.tooltip-rt(@tooltipBgColor:#303133,@tooltipBorderColor:#303133,@tooltipColor:#fff,@position:15px,@arrowSize:8px){
  &[tooltips]{
    .tooltip(@tooltipBgColor,@tooltipBorderColor,@tooltipColor,@position,@arrowSize);
    &::before{
      right:0;
      top:calc(100% + @arrowSize);
    }
    &::after{
      right:@position;
      top:calc(100% + @arrowSize/2);
      transform:rotate(-45deg);
    }
  }
}
.tooltip-tr(@tooltipBgColor:#303133,@tooltipBorderColor:#303133,@tooltipColor:#fff,@position:15px,@arrowSize:8px){
  &[tooltips]{
    .tooltip(@tooltipBgColor,@tooltipBorderColor,@tooltipColor,@position,@arrowSize);
    &::before{
      top:0;
      left:calc(100% + @arrowSize);
    }
    &::after{
      top:@position;
      left:calc(100% + @arrowSize/2);
      transform:rotate(-45deg);
    }
  }
}

/*callout*/
/*.callout(@info:#428bca,@success:#5cb85c,@warning:#f0ad4e,@danger:#d9534f){
  display: block;
  padding: 5px 10px;
  margin: 5px 0;
  color: #777;
  border-left-width: 4px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.03);
  position: relative;
  border-left-color: @info;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-bottom: 6px solid transparent;
    border-left: 6px solid @info;
  }
  &.info {
    border-left-color: @info;
    &::after {
      border-left-color: @info;
    }
  }
  &.success {
    border-left-color: @success;
    &::after {
      border-left-color: @success;
    }
  }
  &.warning {
    border-left-color: @warning;
    &::after {
      border-left-color: @warning;
    }
  }
  &.danger {
    border-left-color: @danger;
    &::after {
      border-left-color: @danger;
    }
  }
}*/
